<template>
	<view class="container">
		<view class="topTips">
			完善个人资料
		</view>
		<u-form :model="form" :error-type="errorType" label-width="240" ref="uForm">
			<u-form-item :border-bottom="false" label="">
				<view class="uploadBox flex-column flexc-center">
					<u-upload max-count="1" :action="action" :file-list="fileList" :before-upload="beforeUpload"
						@on-remove="onRemove"></u-upload>
					<view class="upload_text">
						上传头像更突出自己的个性
					</view>
				</view>
			</u-form-item>
			<u-form-item label="昵称" :required="true" prop="name">
				<u-input placeholder="这是昵称" v-model="form.name" />
			</u-form-item>
			<u-form-item :border-bottom="false" label-position="top" label="性别">
				<view class="sex_box flex">
					<view class="sex flex-center" @click="form.sex = item.id"
						:class="item.id == form.sex ? 'sexSelect' : ''" v-for="(item,index) in sexList" :key="index">
						{{ item.title }}
					</view>
				</view>
			</u-form-item>
			<u-form-item label="年龄">
				<u-input v-model="form.age" placeholder="请填写真实年龄" />
			</u-form-item>
			<u-form-item label="手机号码" :required="true" prop="mobile">
				<view class="flex-between">
					<u-input v-model="form.mobile" placeholder="请输入真实手机号码" />
					<button class="captcha" :plain="true" @click="sendMsg()" :loading="sendVerifyLoad">
						{{sendVerifyLoad?`${downTime}S`:'发送验证码'}}</button>
				</view>
			</u-form-item>
			<u-form-item label="验证码" :required="true" prop="code">
				<u-input v-model="form.code" placeholder="请输入手机验证码" />
			</u-form-item>
			<u-form-item label="登录密码" :required="true" prop="password">
				<u-input v-model="form.password" type="password" :password-icon="false" placeholder="请输入登陆密码" />
			</u-form-item>
			<u-form-item label="再次确认登录密码" :required="true" prop="conPassword">
				<u-input v-model="form.conPassword" type="password" :password-icon="false" placeholder="请再次输入登陆密码" />
			</u-form-item>
			<u-form-item label="支付密码" :required="true" prop="payPassword">
				<u-input v-model="form.payPassword" type="password" :password-icon="false" placeholder="请输入支付密码" />
			</u-form-item>
			<u-form-item label="再次确认支付密码" :required="true" prop="conPayPassword">
				<u-input v-model="form.conPayPassword" type="password" :password-icon="false" placeholder="请再次输入支付密码" />
			</u-form-item>
			<u-form-item label="邀请码(选填)">
				<u-input v-model="form.invitCode" placeholder="请填写邀请码" />
			</u-form-item>
			<view class="reminder">
				温馨提示： 带有 <text class="xing">*</text>标记是必填项
			</view>
			<u-button class="btn" @click="submit">完成</u-button>
		</u-form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: "http://www.bobei.shop/upload",
				fileList: [],
				uploadImg: "",
				errorType: ['message'],
				time: null,
				downTime: 60,
				sendVerifyLoad: false,
				rules: {
					name: [{
						required: true,
						message: '请输入昵称',
						trigger: ['blur'],
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur', 'change'],
						}
					],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur'],
					}],
					conPassword: [{
							required: true,
							message: '请再次确认登录密码',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.form.password == value
							},
							message: '两次输入密码不一致',
							// 触发器可以同时用blur和change
							trigger: ['blur', 'change'],
						}
					],
					payPassword: [{
						required: true,
						message: '请输入支付密码',
						trigger: ['blur'],
					}],
					conPayPassword: [{
							required: true,
							message: '请再次确认支付密码',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.form.payPassword == value
							},
							message: '两次输入支付密码不一致',
							// 触发器可以同时用blur和change
							trigger: ['blur', 'change'],
						}
					],
				},
				form: {
					name: '',
					sex: 1,
					age: '',
					mobile: '',
					code: '',
					password: '',
					conPassword: '',
					payPassword: '',
					conPayPassword: '',
					invitCode: '',
				},
				sexList: [{
						title: '男',
						id: 1
					},
					{
						title: '女',
						id: 0
					},
				],
				sexIndex: 1,
			}
		},
		onLoad(option) {},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			onRemove(index) {
				this.uploadImg = "";
				// console.log(this.uploadImg, "uploadImg")
			},
			beforeUpload(index, list) {
				// console.log(index, list, this.fileList);
				this.$upload({
					data: {
						filePath: list[0].file.path,
					}
				}).then((res) => {
					this.uploadImg = res.file;
					console.log("uploadImg", this.uploadImg)
				}).catch((error) => {
					// console.log("上传error：", res);
				})
			},
			sendMsg() {
				if (!this.form.mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none",
						duration: 1500,
					})
					return
				}
				if (this.sendVerifyLoad) {
					uni.showToast({
						title: `请等待${this.downTime}s后继续操作`,
						icon: "none",
						duration: 1500,
					})
					return
				}
				this.sendVerifyLoad = true

				this.$post({
					module: 'Account',
					interface: 1001,
					data: {
						account: this.form.mobile
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500,
					})
					let time = setInterval(() => {
						this.downTime--;
						if (this.downTime <= 0) {
							this.downTime = 60;
							this.sendVerifyLoad = false;
							clearTimeout(time);
						}
					}, 1000);
				})
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// console.log('验证通过');
						this.$post({
							module: "User",
							interface: "8009",
							data: {
								avatar: this.uploadImg,
								account: this.form.mobile,
								password: this.form.password,
								safeword: this.form.payPassword,
								captcha: this.form.code,
								inviteCode: this.form.invitCode,
								nickname: this.form.name,
								gender: this.form.sex,
								year: this.form.age,

							},
						}).then(res => {
							// console.log("完善资料", res);
							uni.showToast({
								title: "操作成功",
								icon: "none",
								duration: 1500,
							})
							setTimeout(() => {
								this.goBack();
							}, 1500)
						})
					} else {
						// console.log('验证失败');
					}
				});
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0 30rpx;

		.topTips {
			font-size: 40rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 600;
			color: #000000;
			margin: 20rpx 0;
		}

		/deep/.u-list-item {
			border-radius: 50%;
		}

		.uploadBox {
			width: 100%;

			.upload_text {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		/deep/.u-form-item {
			padding: 10rpx !important;
			border-top: none;

			.u-form-item--left__content__label {
				font-weight: 600;
			}
		}

		.sex_box {
			.sex {
				width: 158rpx;
				height: 56rpx;
				border-radius: 8rpx;
				border: 2rpx solid #F2615F;
				color: #F2615F;
				margin-right: 20rpx;
			}

			.sexSelect {
				color: #FFFFFF;
				background: #F2615F;
			}
		}

		.reminder {
			margin: 20rpx 0;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 32rpx;

			.xing {
				margin: 0 10rpx;
				color: #F2615F;
			}
		}

		.btn {
			width: 600rpx;
			color: #FFFFFF;
			background-color: #F2615F;
			border-radius: 56rpx;
		}

		.captcha {
			width: 168rpx;
			height: 46rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #D7D7D7;
			padding: 0;
			margin: 0;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #F2615F;
		}
	}
</style>
